<template>
    <div>
       
        <ButtonGroup @on-click='get'>
            <Button type="primary" @click='changtype(0)'>新闻分类</Button>
            <Button type="primary"  @click='changtype(1)'>产品分类</Button>
            <Button type="primary"  @click='changtype(2)'>地区分类</Button>
            <Upload
                multiple
                type="drag"
                action="http://localhost:3000/upload/filedata"
                name="avatar"
                style="display:inline-block;border:0;height:35px">
                <div style="width:60px;height:30px">
                    <Icon type="ios-cloud-upload" size="30" style="color: #3399ff;"></Icon>                  
                </div>
            </Upload>
        </ButtonGroup>     
        <div>
    <div style="float:left">
        <Tree :data="data" :render="renderContent" show-checkbox></Tree> 

      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" style="width:300px">
          <FormItem label="分类标题" prop="title">
              <Input v-model="formValidate.title" placeholder="请输入分类标题"></Input>
          </FormItem>
          <FormItem label="分类父ID" prop="parentId">
              <Input v-model="formValidate.parentId"></Input>
          </FormItem>
          <FormItem label="分类类型ID" prop="type">
              <Input v-model="formValidate.type"></Input>
          </FormItem>
          <FormItem>
              <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
              <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
          </FormItem>
      </Form>
      </div>
         <div style="float:left;width:600px;margin-left:30px">
             <Table border :columns="columns7" :data="data2"></Table>
         </div>
    </div>
</div>

</template>
<script>
    export default {
        data () {
            return {
              formValidate: {
                    title: '',
                    parentId:'',
                    type:0
                },
                message:'nihao',
                ruleValidate: {
                    title: [
                        { required: true, message: '分类标题不能为空', trigger: 'blur' }
                    ]
                },
              
                data:[],
                buttonProps: {
                    type: 'ghost',
                    size: 'small',
                },
                columns7: [
                    {
                        title: '名字',
                        key: 'filename',
                        
                     
                    },
                  
                    {
                        title: '类型',
                        key: 'mimetypee'
                    },
                    {
                        title: '日期',
                        key: 'data'
                    },
                    {
                        title:'大小',
                        key:'size'
                    },
                    {
                        title: 'action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, 'View'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ],
                data2: [
                    {
                        filename: 'John Brown',
                        mimetypee: 18,
                        data:3029,
                        size: 23
                    },
                    {
                        filename: 'John Brown',
                        mimetypee: 18,
                        data:3029,
                        size: 23
                    },
                   
                ]
            }
        },
        created(){
          // 在初始化阶段，去请求nodejs的api，返回来json数据
        this.getData();
        this.getupload();

        },
        methods: {
            getData(type){
                 var type=type||0;
              this.$http.post(`http://10.31.153.25:3000/cate/list/${type}`)
              .then((response) => {
               this.data = response.data;
              })
            },
            getupload(data2){
                
            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-plus-empty'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { 
                                  this.formValidate.parentId = data._id;
                                   }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-minus-empty'
                            }),
                            on: {
                                click: () => { this.remove(root, node, data) }
                            }
                        })
                    ])
                ]);
            },
            remove (root, node, data) {
               console.log(data);

               this.$http({
                 method:'delete',
                 url:`http://10.31.153.25:3000/cate/data/${data._id}`
               }).then(res=>{
                 console.log(res);
                 this.getData();
                 this.$Message.success('delete success!');
               })
            },
            handleSubmit (name,type) {
              //  console.log(this.formValidate.title);
                this.$refs[name].validate((valid) => {
                    if (valid) {

                        // ajax数据请求

                        this.$http({
                          method: 'post',
                          url:'http://10.31.153.25:3000/cate/data',
                          data: this.formValidate
                        }).then(res=>{
                            console.log(res)
                            this.getData();                         
                          this.$Message.success('Success!');
                         // 重置form表单内容为数据的初始值状态
                         // ********** 非常重要
                         Object.assign(this.$data.formValidate, 
                         this.$options.data().formValidate);

                        })

                        
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
             get(key){
                this.type = key
                this.getData()
            },
            handleReset (name) {           
                this.$refs[name].resetFields();
                
            },
            changtype(type){
                this.getData(type);
                this.formValidate.type=type;
            },
             methods: {
            show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.data2[index].name}<br>Age：${this.data2[index].age}<br>Address：${this.data2[index].address}`
                })
            },
            remove (index) {
                this.data2.splice(index, 1);
            }
        }
        }
    }
</script>
